<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :keyboard="false"
    :forceRender="true"
    v-bind:prefixNo="prefixNo"
    switchHelp
    switchFullscreen
    @cancel="handleCancel"
    :id="prefixNo"
    style="top:20px;height: 95%;">
    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button @click="exportExcel" icon="download">导出</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row class="form-row" :gutter="24">
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="开始日期">
              <j-date v-decorator="['startDate', validatorRules.startDate]" :show-time="false" :readOnly="true" date-format="YYYY-MM-DD"/>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="描述">
              <a-input v-decorator.trim="[ 'description' ]" :readOnly="true"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="24">
          <a-col :lg="24" :md="24" :sm="24">
            <j-editable-table id="billModal"
                              :ref="refKeys[0]"
                              :loading="materialTable.loading"
                              :columns="materialTable.columns"
                              :dataSource="materialTable.dataSource"
                              :minWidth="minWidth"
                              :rowNumber="false"
                              :rowSelection="true"
                              :actionButton="true"
                              :dragSortAndNumber="true"
                              :readOnly="true"
                              @valueChange="onValueChange"
                              @added="onAdded"
                              @deleted="onDeleted">
              <template #depotBatchSet>
                <a-icon type="down" @click="handleBatchSetDepot" />
              </template>
            </j-editable-table>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </j-modal>
</template>
<script>
import pick from 'lodash.pick'
import { FormTypes } from '@/utils/JEditableTableUtil'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
import { BillModalMixin } from '../mixins/BillModalMixin'
import JUpload from '@/components/jeecg/JUpload'
import JDate from '@/components/jeecg/JDate'
import { getMpListShort } from '@/utils/util'
import Vue from 'vue'

export default {
  name: "ShipuOutDayModal",
  mixins: [JEditableTableMixin, BillModalMixin, JeecgListMixin],
  components: {
    JUpload,
    JDate,
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes,
    }
  },
  data () {
    return {
      title:"操作",
      width: '1600px',
      moreStatus: false,
      showSaveButton: true,
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 1,
      visible: false,
      startDateStr: '',
      prefixNo: 'LSCK',
      fileList:[],
      minWidth: 1100,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      refKeys: ['materialDataTable', ],
      activeKey: 'materialDataTable',
      materialTable: {
        loading: false,
        dataSource: [],
        columns: [
          { title: '食谱(天)', key: 'day', width: '15%', type: FormTypes.select, placeholder: '请选择${title}', options: [],
            allowSearch:true, readonly: true, validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          { title: '星期', key: 'week', width: '15%', type: FormTypes.select, placeholder: '请选择${title}', options: [],
            allowSearch:true, readonly: true, validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          { title: '午餐', key: 'lunch', width: '15%', type: FormTypes.select, placeholder: '请选择${title}', options: [],
            allowSearch:true, readonly: true, validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          { title: '晚餐', key: 'dinner', width: '15%', type: FormTypes.select, placeholder: '请选择${title}', options: [],
            allowSearch:true, readonly: true, validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          { title: '夜餐', key: 'night', width: '15%', type: FormTypes.select, placeholder: '请选择${title}', options: [],
            allowSearch:true, readonly: true, validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          { title: '备注', key: 'remark', width: '15%', type: FormTypes.input, placeholder: '备注', readonly: true
          }
        ]
      },
      confirmLoading: false,
      validatorRules:{
        startDate:{
          rules: [
            { required: true, message: '请输入日期!' }
          ]
        }
      },
      url: {
        list: '/shipu/week/getDetailList',
        add: '/shipu/addWeekDetail',
        edit: '/shipu/updateWeekDetail',
        detailList: '/shipu/week/getDetailList'
      }
    }
  },
  created () {
    this.model.id = ''
    let realScreenWidth = window.screen.width
    this.minWidth = realScreenWidth<1500?800:1100
    this.initShipuDay()
    this.initWeek()
  },
  methods: {
    edit (record) {
      console.log('edit')
      if(this.action == 'edit'){
        this.model.id = '1'
      }else{
        this.model.id = ''
      }
      this.model.startDate = record.startDate
      this.model.description = record.description
      this.visible = true;
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(record, 'startDate','description'))
      });

      // 加载子表数据
      let params = {
        startDate: this.model.startDate
      }
      this.requestSubTableDataWeek(this.url.detailList, params, this.materialTable);
    },
    //调用完edit()方法之后会自动调用此方法
    editAfter() {
      console.log('editAfter')
      if (this.action === 'add') {
        this.addInitWeek()
      } else {
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(record, 'startDate','description'))
        });
      }
    },
    //调用完view()方法之后会自动调用此方法
    viewAfter() {
      console.log("viewAfter", this.model)
      this.model.startDate = this.model.startDate
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'startDate','description'))
      })

      // 加载子表数据
      let params = {
        startDate: this.model.startDate
      }
      this.requestSubTableDataWeek(this.url.detailList, params, this.materialTable);
    },
    //提交单据时整理成formData
    classifyIntoFormData(allValues) {
      let billMain = Object.assign(this.model, allValues.formValue)
      let detailArr = allValues.tablesValue[0].values
      if(this.model.id){
        billMain.id = this.model.id
      }
      return {
        info: JSON.stringify(billMain),
        rows: JSON.stringify(detailArr),
      }
    },
    exportExcel() {
      let list = []
      let head = '开始日期,日期,星期,早餐,午餐,晚餐,备注'
      for (let i = 0; i < this.materialTable.dataSource.length; i++) {
        let item = []
        let ds = this.materialTable.dataSource[i]
        item.push(this.model.startDate, ds.day, ds.week, null, ds.lunch, ds.dinner, ds.night, ds.remark)
        list.push(item)
      }
      let tip = '周食谱'
      this.handleExportXlsPost('周食谱', '周食谱', head, tip, list)
    }
  }
}
</script>
<style scoped>
.sign .ant-input{
  font-size: 30px;
  font-weight:bolder;
  text-align:center;
  border-left-width:0px!important;
  border-top-width:0px!important;
  border-right-width:0px!important;
}
</style>